<template>
  <div class="flex column justify-between">
    <div class="detail-container wrapper">
      <div class="title">
        IO口信息
      </div>
      <div>
        <div class="content" v-for="item in ioKeys" :key="item">
          <span>{{ item }}: </span>
          <span v-if="ioInfo[item] !== undefined" class="status" :class="[ioInfo[item] === '1' ? 'connect' : '']"></span>
          <span>{{ioInfo[item] === undefined ? '--' : (ioInfoObj[ioInfo[item]] || '--')}}</span>
        </div>
      </div>
    </div>
    <div class="detail-container wrapper">
      <div class="title">
        运行信息
      </div>
      <div>
        <process :value="memAndRom.memoryUsage" :alarm="memAndRom.memoryUsageWarning" title="内存使用百分比" />
        <process :value="memAndRom.diskUsage" :alarm="memAndRom.diskUsageWarning" title="硬盘使用百分比" />
        <process :value="memAndRom.cpuUsage" :alarm="memAndRom.cpuUsageWarning" title="CPU百分比" />
      </div>
    </div>
  </div>
</template>

<script>
import process from './process'
import { ioInfoObj } from '../list-components/plc-dialog/constant'
export default {
  name: 'io-runtime-info',
  components: {
    process
  },
  props: {
    ioInfo: {
      type: Object,
      default: () => ({})
    },
    memAndRom: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ioKeys () {
      return Object.keys(this.ioInfo) || []
    }
  },
  data () {
    return {
      ioInfoObj: ioInfoObj
    }
  }
}
</script>

<style scoped lang="scss">
.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  background: #666666;
}

.connect {
  background: $positive;
}
</style>
<style scoped lang="stylus">
.wrapper
  background #ffffff
  border-radius 6px
  margin-right 24px
  margin-bottom 24px
.detail-container
  height 170px
  padding 20px
  .title
    line-height 1
    font-size 16px
    font-weight 500
    color $primary

  .content
    color #333333
    line-height 1.8

</style>
